<template>
    <view>
        <navView navTitle="薪资记录" backgroundColor="#008efe" titleColor="#fff" :isBack="true"></navView>
        <view class="container">
            <!-- 月份筛选 -->
            <view class="filter-box">
                <uni-datetime-picker type="date" v-model="filterMonth" @change="getSalaryList(true)" />
            </view>

            <!-- 薪资列表 -->
            <view class="salary-list">
                <view class="list-item" v-for="(item, index) in salaryList" :key="index" @tap="$navTo('/subpkg/attendance/detail?id=' + item.id)">
                    <view class="item-header">
                        <text class="user-name">{{ item.staff.name }}</text>
                        <text class="month">{{ item.month }}</text>
                    </view>

                    <view class="item-detail">
                        <!-- 基本工资行 -->
                        <view class="detail-row">
                            <uni-icons type="wallet" size="18" color="#999"></uni-icons>
                            <text class="label">基本工资：</text>
                            <text class="value">{{ item.staff.salary || 0.00 }}</text>
                        </view>

                        <!-- 绩效工资行 -->
                        <view class="detail-row">
                            <uni-icons type="star" size="18" color="#999"></uni-icons>
                            <text class="label">绩效工资：</text>
                            <text class="value">￥{{ (item.performance_pay / 100).toFixed(2) }}</text>
                        </view>

                        <!-- 学历补助行 -->
                        <view class="detail-row">
                            <uni-icons type="education" size="18" color="#999"></uni-icons>
                            <text class="label">学历补助：</text>
                            <text class="value green">+￥{{ (item.education_allowance / 100).toFixed(2) }}</text>
                        </view>

                        <!-- 扣除金额行 -->
                        <view class="detail-row">
                            <uni-icons type="minus" size="18" color="#999"></uni-icons>
                            <text class="label">扣款金额：</text>
                            <text class="value red">-￥{{ (
                                (Number(item.leaveamount || 0) +
                                Number(item.late_deduction || 0) +
                                Number(item.tax_amount || 0) +
                                Number(item.otheramount || 0)) / 100
                                ).toFixed(2) }}</text>
                        </view>
                    </view>

                    <!-- 合计金额 -->
                    <view class="total-amount">
                        <text>实发金额：</text>
                        <text class="amount">￥{{
                            item.amount || 0.00
                            }}</text>
                    </view>
                </view>

                <!-- 加载状态 -->
                <view v-if="isLoading" class="loading-text">加载中...</view>
                <view v-if="isNoMore" class="no-more-text">已经到底啦~</view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            salaryList: [],
            filterMonth: new Date().toISOString().slice(0, 7), // 初始值设为当前年月
            currentPage: 1,
            totalPages: 1,
            isLoading: false,
            isNoMore: false,
            userInfo: uni.getStorageSync('userInfo') || {}
        };
    },
    onLoad() {
        this.getSalaryList();
    },
    onReachBottom() {
        if (!this.isNoMore) this.getSalaryList();
    },
    methods: {
        async getSalaryList(reset = false) {
            if (this.isLoading) return;
            if (reset) this.currentPage = 1;
            
            this.isLoading = true;
            
            try {
                const res = await this.$request('/addons/qingdong/salary/getUserSalayList', 'GET', {
                    page: this.currentPage,
                    month: this.filterMonth
                });
                
                if (reset) this.salaryList = [];
                this.salaryList = [...this.salaryList, ...res.data.data];
                
                this.totalPages = res.data.last_page;
                this.isNoMore = this.currentPage >= this.totalPages;
                this.currentPage++;
            } finally {
                this.isLoading = false;
            }
        }
    }
};
</script>

<style scoped lang="scss">
.container {
    padding: 20rpx;
}

.filter-box {
    padding: 20rpx;
    background: #fff;
}

.salary-list {
    margin-top: 20rpx;
    
    .list-item {
        background: #fff;
        border-radius: 16rpx;
        padding: 24rpx;
        margin-bottom: 24rpx;
        box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
        
        .item-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 24rpx;
            
            .user-name {
                font-size: 32rpx;
                font-weight: 500;
                color: #333;
            }
            
            .month {
                font-size: 28rpx;
                color: #666;
            }
        }
        
        .item-detail {
            .detail-row {
                display: flex;
                align-items: center;
                margin: 16rpx 0;
                font-size: 28rpx;
                
                .label {
                    color: #666;
                    margin-left: 12rpx;
                }
                
                .value {
                    margin-left: auto;
                    color: #333;
                    
                    &.green { color: #4CAF50; }
                    &.red { color: #F44336; }
                }
            }
        }
        
        .total-amount {
            border-top: 1px solid #eee;
            padding-top: 24rpx;
            margin-top: 24rpx;
            text-align: right;
            font-size: 32rpx;
            
            .amount {
                font-weight: 600;
                color: #008EFE;
                margin-left: 16rpx;
            }
        }
    }
    
    .loading-text,
    .no-more-text {
        text-align: center;
        padding: 24rpx;
        color: #999;
        font-size: 28rpx;
    }
}
</style>
